<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link href="static/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="static/font-awesome/all.min.css" rel="stylesheet">
    <style>
        :root {
            --sidebar-width: 250px;
            --sidebar-collapsed-width: 65px;
            --primary-color: #4e73df;
            --light-color: #f8f9fc;
            --hover-color: #3a5cd0;
            --border-color: rgba(255, 255, 255, 0.1);
        }

        body {
            font-family: 'Nunito', sans-serif;
            background-color: var(--light-color);
            display: flex;
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .sidebar {
            width: var(--sidebar-width);
            background-color: var(--primary-color);
            color: white;
            transition: all 0.3s ease;
            overflow-x: hidden;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            position: relative;
        }

        .sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
        }

        .sidebar-header {
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
            min-height: 70px;
        }

        .sidebar-header h1 {
            font-size: 1.2rem;
            margin: 0;
            font-weight: 700;
            white-space: nowrap;
            transition: opacity 0.3s;
        }

        .sidebar.collapsed .sidebar-header h1 {
            opacity: 0;
            width: 0;
        }

        .toggle-btn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            padding: 0.5rem;
            font-size: 1.2rem;
            transition: transform 0.3s;
            position: absolute;
            right: 1rem;
            top: 1.2rem;
        }

        .sidebar.collapsed .toggle-btn {
            transform: rotate(180deg);
            right: 0.8rem;
        }

        .nav-menu {
            padding: 0.8rem 0;
        }

        .nav-item {
            position: relative;
            display: block;
            padding: 0;
            margin: 0;
        }

        .nav-link {
            display: flex !important;
            align-items: center;
            padding: 0.8rem 1.5rem !important;
            color: rgba(255, 255, 255, 0.8) !important;
            text-decoration: none;
            white-space: nowrap;
            border-left: 4px solid transparent;
            transition: all 0.3s;
        }

        .nav-link:hover,
        .nav-link.active {
            color: white !important;
            background-color: var(--hover-color);
            border-left-color: white;
        }

        .nav-link i {
            width: 20px;
            text-align: center;
            font-size: 1rem;
            margin-right: 1rem;
            transition: margin 0.3s;
        }

        .sidebar.collapsed .nav-link i {
            margin-right: 4rem;
        }

        .nav-link span {
            opacity: 1;
            transition: opacity 0.3s;
        }

        .sidebar.collapsed .nav-link span {
            opacity: 0;
            width: 0;
            height: 0;
            overflow: hidden;
        }

        .nav-tooltip {
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 0.5rem 0.8rem;
            border-radius: 4px;
            font-size: 0.8rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s, transform 0.3s;
            z-index: 1000;
        }

        .sidebar.collapsed .nav-link:hover .nav-tooltip {
            opacity: 1;
            transform: translateY(-50%) translateX(10px);
        }

        .main-content {
            flex-grow: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 0.3s;
        }

        iframe {
            flex-grow: 1;
            border: none;
            background-color: white;
            width: 100%;
            height: 100%;
        }

        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                left: 0;
                top: 0;
                height: 100%;
                z-index: 1000;
                transform: translateX(-100%);
            }

            .sidebar.show {
                transform: translateX(0);
            }

            .sidebar.collapsed {
                transform: translateX(-100%);
            }

            .main-content {
                width: 100%;
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
<div class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <h1>影院购票系统</h1>
        <button class="toggle-btn" id="toggleBtn">
            <i class="fas fa-chevron-left"></i>
        </button>
    </div>
    <nav class="nav flex-column nav-menu" id="navMenu">
        <!-- 菜单项将通过JavaScript动态生成 -->
    </nav>
</div>

<div class="main-content" id="mainContent">
    <iframe id="mainFrame" src="home.jsp"></iframe>
</div>

<script src="static/bootstrap/jquery-3.5.1.slim.min.js"></script>
<script src="static/bootstrap/popper.min.js"></script>
<script src="static/bootstrap/bootstrap.min.js"></script>
<script>
    // 菜单配置
    const menuItems = [
        {
            id: 'home',
            title: '主页',
            icon: 'fa-home',
            url: 'home.jsp',
            roles: ['admin', 'user']
        },
        {
            id: 'profile',
            title: '个人信息',
            icon: 'fa-user',
            url: 'profile.jsp',
            roles: ['admin', 'user']
        },
        {
            id: 'password',
            title: '修改密码',
            icon: 'fa-key',
            url: 'passwordModified.jsp',
            roles: ['admin', 'user']
        },
        {
            id: 'userManage',
            title: '用户管理',
            icon: 'fa-users',
            url: 'userManage.jsp',
            roles: ['admin']
        },
        {
            id: 'CinemaManage.jsp',
            title: '影院管理',
            icon: 'fa-building',
            url: 'CinemaManage.jsp',
            roles: ['admin']
        },
        {
            id: 'HallManagement.jsp',
            title: '影厅管理',
            icon: 'fa-film',
            url: 'HallManagement.jsp',
            roles: ['admin']
        },
        {
            id: 'MovieManage.jsp',
            title: '电影管理',
            icon: 'fa-video',
            url: 'MovieManage.jsp',
            roles: ['admin']
        },
        {
            id: 'ShowtimeManage.jsp',
            title: '影片上映',
            icon: 'fa-calendar-alt',
            url: 'ShowtimeManage.jsp',
            roles: ['admin']
        },
        {
            id: 'ShowMoviceInfo.jsp',
            title: '影片购票',
            icon: 'fa-ticket-alt',
            url: 'ShowMoviceInfo.jsp',
            roles: ['admin', 'user']
        },
        {
            id: 'orderManage.jsp',
            title: '订单管理',
            icon: 'fa-shopping-cart',
            url: 'orderManage.jsp',
            roles: ['admin', 'user']
        }
    ];

    // 权限检查函数
    function hasPermission(itemRoles) {
        if (!itemRoles || itemRoles.length === 0) {
            return true;
        }
        const user = JSON.parse(localStorage.getItem('user')) || {};
        return itemRoles.includes(user.roleType);
    }

    // 生成菜单
    function generateMenu() {
        const navMenu = document.getElementById('navMenu');
        navMenu.innerHTML = ''; // 清空现有菜单

        menuItems.forEach(item => {
            if (hasPermission(item.roles)) {
                const listItem = document.createElement('div');
                listItem.className = 'nav-item';

                const link = document.createElement('a');
                link.href = '#';
                link.className = 'nav-link';
                link.setAttribute('data-id', item.id);
                link.innerHTML = `
                    <i class="fas ${item.icon}"></i>
                    <span>${item.title}</span>
                    <div class="nav-tooltip">${item.title}</div>
                `;
                link.onclick = () => loadPage(item.url, item.id);

                listItem.appendChild(link);
                navMenu.appendChild(listItem);
            }
        });
    }

    // 页面加载和菜单激活
    function loadPage(page, id) {
        document.getElementById('mainFrame').src = page;
        updateActiveMenu(id);
    }

    function updateActiveMenu(activeId) {
        document.querySelectorAll('.nav-link').forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('data-id') === activeId) {
                link.classList.add('active');
            }
        });
    }

    // 侧边栏折叠功能
    const sidebar = document.getElementById('sidebar');
    const toggleBtn = document.getElementById('toggleBtn');
    const mainContent = document.getElementById('mainContent');

    toggleBtn.addEventListener('click', () => {
        sidebar.classList.toggle('collapsed');
        // 保存状态到本地存储
        localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
    });

    // 加载保存的侧边栏状态
    function loadSidebarState() {
        const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
        if (isCollapsed) {
            sidebar.classList.add('collapsed');
        }
    }

    // 响应式处理
    function handleResize() {
        if (window.innerWidth <= 768) {
            sidebar.classList.add('collapsed');
            document.body.classList.add('mobile');
        } else {
            document.body.classList.remove('mobile');
            loadSidebarState(); // 恢复保存的状态
        }
    }

    window.addEventListener('resize', handleResize);

    // 初始化
    window.onload = function () {
        generateMenu();
        loadSidebarState();
        handleResize();
        loadPage('home.jsp', 'home');
    };
</script>
</body>
</html>